<template>
	<div class="container">
		<van-nav-bar
		  left-arrow
		  @click-left="onClickLeft"
		  :border="false"
		  style="display: flex;align-items: center;"
		>
		  <div slot="title" class="weight_header">浏览过的</div>
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
		  <div slot="right" @click="clear">清空</div>
	    </van-nav-bar>
	    
	   <div class="noData" v-if="showNoData">
	   	<img src="../../../../static/img/lanhu/noData.png" alt="" />
	   </div>	    
	    
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="padding: 15px 10px;" v-if="!showNoData">
		  <van-list
		    v-model="loading"
		    :finished="finished"
		    :finished-text="finishedText"
		    @load="onLoad"
		    :immediate-check="false"
		    :style="{minHeight: clientHeight + 'px' }"
		  >	
		  
	        <div class="li" v-for="(item,index) in list" :key="index">
	        	<div class="a">
	        		{{item.dateTime}}
	        	</div>
	        	<div class="b">
	        		<div class="c" v-for="(item2,index2) in item.list" :key="index2">
	        			<div class="backImgWrap" v-lazy:background-image="item2.goodsImage" style="width: 100%;"
		  	  	 		:style="{backgroundImage: 'url(' + item2.goodsImage + ')'}" @click="linkPreview(item2)">
	        			</div>
	        			<div class="d">
	        				<span>¥ </span>
	        				<span>{{item2.comPrice}}</span>
	        			</div>
	        		</div>       		
	        	</div>
	        </div>
	        
	        
	        
		  </van-list>		
		</van-pull-refresh> 		
		
		
		
        <confirm ref="confirm" @queryConfirm="queryConfirm" title="确定清空浏览记录?"></confirm>
      

        
	</div>	
</template>

<script>	
import {getFun} from '@/api/publicFun.js'	
import confirm from '_c/confirm.vue'
let publicFun=getFun()	
export default {
	components: {
	    confirm
	},		
	data() {
       return { 
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:[],           // 储存数据用
          url1:this.$api+'/marketorderservice/api/v1/market/findMyGoodsLookList',
          url2:this.$api+'/marketorderservice/api/v1/market/deleteGoodsHistory/',// 清空浏览记录
          showNoData:false, // 是否显示暂无数据
          userId:'',
          finishedText:''          
       }
	},
	methods: {
	   // 跳转到商品详情页
	   linkPreview(item){
  		  let arg='[{"comId":"'+item.comId+'"}]' 
  		  this.linkGoodsDetail(this.userId,item.comUid,arg)		
	   },		
	   clear(){
	   	 this.$refs.confirm.showWin()
	   },
	   // 清空浏览记录
	   queryConfirm(){
	   	  let that=this
		  this.$Axios2.Get(this.url2+this.userId).then(function(res) {
		  	that.onRefresh()
		  })		   	
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;	   
	          this.finishedText='我也是有底线的'
	        }
	      }, 1000);   	
	  },	
       // 获取数据
       getData(){
		  let that=this
		  let params={
		  	userId:this.userId,
		  	type:1
		  }
		  this.$Axios2.postRequest(this.url1,params,{pageNum:this.pageNum,pageSize:'3'}).then(function(res) {
		  	if(res.data.page.total==0){
		  		that.showNoData=true
		  	}
            that.list=that.list.concat(res.data.page.records)
            that.pages=res.data.page.pages
		  })	      	
       }	  
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;
	    this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
*{color: #333;box-sizing: border-box;}
.container{position: absolute;left: 0;top: 0;background: #f8f8f8;min-height: 100%;width: 100%;}
.van-nav-bar{background: #FFD630;}
.li{ margin-bottom: 15px;
	.a{font-size: 15px;color: #999;margin-bottom: 10px;}
	.b{display: flex;flex-wrap: wrap;
	  .c{width: 32%;margin-right: 2%;margin-bottom: 5px;
	    img{width: 100%;height: 115px;display: block;border-radius: 4px 4px 0 0;}
	    .d{padding: 10px 0 10px 10px;background: #fff;
	      span{color: #FF3B30;font-weight: 500;}
	    }
	  }
	  .c:nth-child(3n){margin-right: 0;}
	}
}
</style>